import React from 'react'
import {observer,inject} from "mobx-react";
@inject('userStore')
@observer
class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            //构造器里面的是私有状态，不提倡使用props赋值
            username:'',
            password:'',
        }
    }
    userNameFun(e){
        //console.log(e.target.value)
        let username = e.target.value
        this.setState({
            username:username
        })
    }
    passwordFun(e){
        //console.log(e.target.value)
        let password = e.target.value
        this.setState({
            password:password
        })
    }
    loginBtnFun(){
        let obj = {
            username:this.state.username,
            password:this.state.password,
        }
        if(obj.username !== '' && obj.password !== ''){
            console.log('登录成功')
            this.props.userStore.loginServer().then(()=>{
                this.props.history.push('/Main')
            })
        }else {
            alert('不能为空！')
        }
    }

    render() {
        let {username,password} = this.state
        return (
            <div style={{marginTop:'30px'}}>
                <label htmlFor="userName">
                    <input type="text" id='userName' placeholder='请输入账号' value={username} onChange={this.userNameFun.bind(this)}/>
                </label>
                <label htmlFor="password">
                    <input type="text" id='password' placeholder='请输入密码' value={password} onChange={this.passwordFun.bind(this)}/>
                </label>
                <button onClick={this.loginBtnFun.bind(this)}>登录</button>
            </div>
        )
    }
}

export default Login